<template>
  <section id="member" class="section card">
    <div class="section__header">
      <h2>会员中心 · 企业协同门户</h2>
      <p>
        登录后可在会员中心办理交易、核实、发票及企业资料管理等任务。数据结构参考
        <code>server/docs/user_org_design.md</code> 与相关服务。
      </p>
    </div>
    <div v-if="partialAction" class="member__notice">
      <strong>待办提示：</strong>
      <span>
        {{ partialAction === "need_bind_phone"
          ? "绑定手机号以完成登录流程"
          : "完善企业认证资料后即可正常下单" }}
      </span>
    </div>
    <div class="member-grid">
      <article class="member-card" :class="{ 'member-card--highlight': partialAction === 'need_bind_phone' }">
        <h3>交易信息</h3>
        <ul>
          <li>交易信息总览：采购金额、待办提醒、对账状态</li>
          <li>企业订单：按照状态、项目、仓库维度检索订单</li>
          <li>购物车积分兑换：查看积分权益、兑换记录</li>
          <li>工厂聚乐部：查看平台活动、培训与公告</li>
          <li>期货询价：跟踪询价进度、卖家回复内容</li>
          <li>消息信息：接收库存核实、物流、结算等通知</li>
          <li>开票申请：提交开票需求，查看审批与邮寄状态</li>
          <li>我的收藏：管理常用型号、供应商、订阅提醒</li>
        </ul>
      </article>
      <article class="member-card" :class="{ 'member-card--highlight': partialAction === 'need_verify_identity' }">
        <h3>企业信息</h3>
        <ul class="two-column">
          <li>基本信息：企业资质、联系人、认证状态</li>
          <li>账户余额：预存款、信用额度及使用明细</li>
          <li>发票信息：发票抬头、税号、开票历史</li>
          <li>收货地址：多仓收货地址及责任人管理</li>
          <li>员工账号：采购员/财务/审批等角色授权</li>
          <li>安全设置：登录日志、设备指纹、操作留痕</li>
        </ul>
      </article>
    </div>
  </section>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  partialAction: { type: String, default: "" }
});
</script>

<style scoped lang="scss">
.section {
  margin-top: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.member__notice {
  background: rgba(0, 82, 217, 0.08);
  border: 1px solid rgba(0, 82, 217, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--primary-color);
  font-size: 14px;
}

.section__header {
  h2 {
    margin: 0 0 8px;
  }

  p {
    margin: 0;
    color: var(--gray-500);

    code {
      background: var(--gray-100);
      border-radius: 6px;
      padding: 2px 6px;
      font-size: 12px;
      color: var(--primary-color);
    }
  }
}


.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.member-card {
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(140deg, #f4f6fb 0%, #ffffff 100%);
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 12px;

  h3 {
    margin: 0;
  }

  p {
    margin: 0;
    color: var(--gray-500);
    font-size: 14px;
  }

  ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--gray-700);

    li + li {
      margin-top: 6px;
    }
  }

  .two-column {
    columns: 2;
    column-gap: 18px;

    li {
      break-inside: avoid;
      margin-bottom: 6px;
    }

    @media (max-width: 720px) {
      columns: 1;
    }
  }

  &--highlight {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.15);
  }
}
</style>
